<template>
	<view class="baseForm">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<!-- 条码录入 -->
		<view class="upload-scan">
			<scan-bar id="scanStorageUnitInput" ref="storageUnitScanBarRef" placeholder="扫描送货单条码" @code-scanned="getStorageUnitInfoByCode"
				:key="datekey"></scan-bar>
		</view>
		<u-text text="包装信息" class="area-header">
		</u-text>
		<view>
			<view class="body">
				<u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm" class="form" labelWidth="150rpx"
					errorType="toast">
					<u-form-item label="包装编号" prop="extenalCode">
						<u--input v-model="formData.extenalCode" disabled inputAlign="right" border="none"></u--input>
					</u-form-item>
					<u-form-item label="物料编码" prop="materialCode">
						<u--input v-model="formData.materialCode" disabled inputAlign="right" border="none"></u--input>
					</u-form-item>
					<u-form-item label="物料名称" prop="materialName">
						<u--input v-model="formData.materialName" disabled inputAlign="right" border="none"></u--input>
					</u-form-item>
					<u-form-item label="数量/重量" prop="totalQuantity">
						<u--input v-model="formData.totalQuantity" disabled inputAlign="right" border="none"></u--input>
					</u-form-item>
					<u-form-item label="单位" prop="totalQuantity">
						<u--input v-model="formData.quantityUnit" disabled inputAlign="right" border="none"></u--input>
					</u-form-item>
					<u-form-item label="存储批次" prop="stockBatch">
						<u--input v-model="formData.stockBatch" disabled inputAlign="right" border="none"></u--input>
					</u-form-item>
					<u-form-item label="供货批次" prop="supplyBatch">
						<u--input v-model="formData.supplyBatch" disabled inputAlign="right" border="none"></u--input>
					</u-form-item>
				</u--form>
			</view>
		</view>
		<u-text text="货位信息" class="area-header">
		</u-text>
		<view class="body">
			<view class="upload-scan">
				<scan-bar id="scanInput" ref="scanBarRef" placeholder="扫描货位码" @code-scanned="getBinByCode"
					:key="datekey"></scan-bar>
			</view>
			<u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm" class="form" labelWidth="150rpx"
				errorType="toast">
				<u-form-item label="货位" prop="binCode">
					<u--input v-model="formData.binCode" disabled inputAlign="right" border="none"></u--input>
				</u-form-item>
			</u--form>
		</view>
		<u-line></u-line>
		<!-- 提交按钮 -->
		<view class="search">
			<u-button type="primary" @click="confirmButtonClick" class="custom-style" :loading="posting">确定</u-button>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import ScanBar from '@/components/scan-bar/index.vue';
	import { http } from "../../../utils/http";
	import ULine from "../../../uni_modules/uview-plus/components/u-line/u-line.vue";
	// 表单数据定义
	const formData = reactive({
	  id: "",
	  storageUnitCode: "",
	  extenalCode: "",
	  materialId: "",
	  materialCode: "",
	  materialName: "",
	  packageMaterialId: "",
	  packageMaterialCode: "",
	  packageMaterialName: "",
	  stockBatch: "",
	  supplyBatch: "",
	  organizationId: "",
	  organizationCode: "",
	  organizationName: "",
	  plantId: "",
	  plantCode: "",
	  plantName: "",
	  warehouseId: "",
	  warehouseCode: "",
	  warehouseName: "",
	  storageLocationId: "",
	  storageLocationCode: "",
	  storageLocationName: "",
	  storageTypeId: "",
	  storageTypeCode: "",
	  storageTypeName: "",
	  storageSectionId: "",
	  storageSectionCode: "",
	  binId: "",
	  binCode: "",
	  totalQuantity: "",
	  availableQuantity: "",
	  freezeQuantity: "",
	  quantityUnit: "",
	  usedColume: "",
	  usedArea: "",
	  usedWeight: "",
	  version: "",
	  remarks: "",
	  createTime: "",
	  createdUserId: "",
	  createdUserName: "",
	  lastUpdateTime: "",
	  lastUpdatedUserId: "",
	  lastUpdatedUserName: "",
	  deleted: "",
	});

	// 重置表单信息 & 光标自动blur
	const storageUnitScanBarRef = ref();
	const scanBarRef = ref();
	const datekey = ref(new Date());
	// 表单规则定义
	const rules = ref({
		binCode: [
			{
				type: 'string',
				required: true,
				message: '请选择目标货位',
				trigger: ['blur', 'change']
			}
		],
	});
	
	onLoad(() => {
		setTimeout(()=>{
			storageUnitScanBarRef.value.reset();
		}, 1000);
		
	})

	// 校验提交
	const uForm = ref();
	const posting = ref(false);
	
	async function getStorageUnitInfoByCode(result : any) {
		const data = await http({
			url: '/wms/storageunit/getInfoByExtenalCode/' + result,
			method: 'GET',
			data: {}
		}).finally(
			storageUnitScanBarRef.value.reset()
		);
		Object.assign(formData, data.data);
		scanBarRef.value.reset();
	}

	async function getBinByCode(result : any) {
		const data = await http({
			url: '/wms/bin/getBinByCode/' + result,
			method: 'GET',
			data: {}
		}).finally(
			scanBarRef.value.reset()
		);
		formData.binId = data.data.id;
		formData.binCode = data.data.binCode;
	}

	async function confirmButtonClick() {
		if(!formData.id) {
			uni.$u.toast('请先扫描要上架的包装！');
		} else if (!formData.binId) {
			uni.$u.toast('请扫描要上架的货位码！');
		} else {
			const data = await http({
				url: '/wms/rmreceipt/shelves/',
				method: 'POST',
				data: formData
			});
			
			if(data.data.code == 200) {
				storageUnitScanBarRef.value.reset();
			};
				
		}
	}
</script>

<style lang="scss">
	.baseForm {
		.area-header {
			color: #909193;
			padding: 10px 15px;
			margin-bottom: 0;
			font-size: 15px;
			background-color: #f3f4f6;
			display: flex;
		}

		.upload-scan {
			padding: 10px 20rpx;
		}

		.body {
			padding: $uni-page-padding;

			.scan-bar {
				display: flex;
				flex: 1;
			}
			.form {
				padding: 0 20rpx;
			}
		}

		.u-line {
			padding: 10px 0;
		}

		.search {
			display: flex;

			.custom-style {
				// width: 120px;
				margin: 10px 5px 5px;
				height: 36px;
				border-radius: 8px;

				&:nth-child(1) {
					flex: 1
				}

				&:nth-child(2) {
					flex: 3
				}
			}
		}
	}
</style>